<template>
  <div class="app-container">
    <div>
      <!-- <el-input v-model="newsViewModel.Title" size="small" placeholder="标题" style="width: 200px;" class="filter-item"
        @keyup.enter.native="queryNews" />
      <el-input v-model="newsViewModel.SubTitle" size="small" placeholder="副标题" style="width: 200px;"
        class="filter-item" @keyup.enter.native="queryNews" /> -->
      <el-select v-model="newsViewModel.Status" size="small" placeholder="请选择">
        <el-option v-for="item in StatesList" :key="item.key" :label="item.title" :value="item.key">
        </el-option>
      </el-select>
      <el-button type="primary" size="small" @click="query" icon="el-icon-search">查询</el-button>
      <!-- <el-button type="primary" size="small" @click="handleAdd" icon="el-icon-plus">新增</el-button> -->
      <el-button type="primary" size="small" @click="refresh" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table v-loading="loading" :data="newsList" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      style="width: 100%;margin-top:30px;" border>
      <el-table-column label="姓名" prop="UserName">
        <template slot-scope="scope">{{ scope.row.UserName }}</template>
      </el-table-column>
      <el-table-column label="职员编码" prop="Unumber">
        <template slot-scope="scope">{{ scope.row.Unumber }}</template>
      </el-table-column>
      <el-table-column label="消息标题" prop="MessageTitle" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.MessageTitle }}</template>
      </el-table-column>
      <el-table-column label="消息内容" prop="MessageContent" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.MessageContent }}</template>
      </el-table-column>
      <el-table-column label="发送状态" prop="Status">
        <template slot-scope="scope">{{ scope.row.StatusStr }}</template>
      </el-table-column>
      <el-table-column label="备注信息" prop="Note" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Note }}</template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="newsViewModel.total>0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="newsViewModel.page" :page-sizes="[10, 20, 30, 40,100]" :page-size="newsViewModel.pageSize"
        @prev-click="lastPage" @next-click="nextPage" background layout="total, sizes, prev, pager, next, jumper"
        :total="newsViewModel.total"></el-pagination>
    </div>
  </div>

</template>

<script>
  import { getMessageLog } from '@/api/message'
  import { deepClone } from "@/utils";

  export default {
    data() {
      return {
        newsViewModel: {
          page: 1,
          pageSize: 10,
          total: 0,
          Title: '',
          SubTitle: '',
          Code: 'notice',
          Status: '-1',
          MessageId: '',
          OrderBy: 'CreateTime',//排序字段
          IsAsc: true //是否升序
        },
        loading: false,
        roleList: [],
        newsList: [],
        actionUrl: '',
        StatesList: [
          { key: '-1', title: '全部' },
          { key: '0', title: '失败' },
          { key: '1', title: '成功' }
        ]
      }
    },
    computed: { // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存

    },
    created() {  // 实例创建完成后执行的代码
      // this.getNewsList(this.newsViewModel);
      // this.actionUrl = this.apiPre + '/Upload/UploadFiles'
      this.newsViewModel.MessageId = this.$route.params && this.$route.params.id
      this.getMessageLog()
    },
    methods: {
      async getMessageLog() {
        this.loading = true
        var res = await getMessageLog(this.newsViewModel)
        if (res.code == 200) {
          this.newsList = res.data.Items
          this.newsViewModel.total = res.data.TotalCount
        }
        this.loading = false
      },
      refresh() {
        this.newsViewModel.page = 1
        this.newsViewModel.Status = '-1'
        this.getMessageLog()
      },
      query() {
        this.newsViewModel.page = 1
        this.getMessageLog()
      },
      lastPage(val) {
        this.newsViewModel.page = val;
      },
      nextPage(val) {
        this.newsViewModel.page = val;
      },
      handleChange(value) {
      },
      handleSizeChange(val) {
        this.newsViewModel.pageSize = val;
        this.getMessageLog()
      },
      handleCurrentChange(val) {
        this.newsViewModel.page = val
        this.getMessageLog()
      }
    }
  }
</script>